<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<style type="text/css">
			#container{
				width: 400px;
				height: 300px;
				margin: 50px auto;
			}
			h2{
				font-size: 40px;
			}
			input{
				width: 300px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<form action="" method="">
			<h2>欢迎注册</h2>
				<input type="text" name="user_id" class="user_id" value="" placeholder="请输入5-16位账号" /><br>
				<input type="password" name="password" class="password"  placeholder="请输入你的密码"/><br>
				<input type="email" name="user_email"  class="user_email" value="" placeholder="请输入你的邮箱或联系方式" /><br>
				<input type="text" name="user_name" class="user_name"  value="" placeholder="请输入你的昵称" /><br>
				<input type="button" name="" id="btn" value="注册" />
			</form>
		</div>
	</body>
	<script type="text/javascript">
		let btnEle = document.querySelector("#btn");
		let useridEle = document.querySelector(".user_id");
		let pwdEle = document.querySelector(".password");
		let emailEle = document.querySelector(".user_email");
		let nameEle = document.querySelector(".user_name");
		btnEle.onclick = function() {
			let userid=useridEle.value;
			let passwor=pwdEle.value;
			let useremail=emailEle.value;
			let username=nameEle.value;
			// console.log(useridEle.value);
			ajax({
			    url : "php/register.php",  // url---->地址
			    type : "POST",   // type ---> 请求方式
			    async : true,   // async----> 同步：false，异步：true 
			    data : {        //传入信息
			        user_id : `${userid}`,
			        password : `${passwor}`,
					user_email: `${useremail}`,
					user_name: `${username}`
			    },
			    success : function(data){   //返回接受信息
			        // console.log(data);
					data=JSON.parse(data);
					if(data.status==1){
						alert('注册成功!');
					}else{
						alert('注册失败,该用户名已存在!');
					}
			    }
			})
		}
		//ajax封装函数
		function ajax(options){
		    var xhr = null;
		    var params = formsParams(options.data);
		    //创建对象
		    if(window.XMLHttpRequest){
		        xhr = new XMLHttpRequest()
		    } else {
		        xhr = new ActiveXObject("Microsoft.XMLHTTP");
		    }
		    // 连接
		    if(options.type == "GET"){
		        xhr.open(options.type,options.url + "?"+ params,options.async);
		        xhr.send(null)
		    } else if(options.type == "POST"){
		        xhr.open(options.type,options.url,options.async);
		        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		        xhr.send(params);
		    }
		    xhr.onreadystatechange = function(){
		        if(xhr.readyState == 4 && xhr.status == 200){
		            options.success(xhr.responseText);
		        }
		    }
		    function formsParams(data){
		        var arr = [];
		        for(var prop in data){
		            arr.push(prop + "=" + data[prop]);
		        }
		        return arr.join("&");
		    }
		 
		}
		 
		// ajax({
		//     url : "a.php",  // url---->地址
		//     type : "POST",   // type ---> 请求方式
		//     async : true,   // async----> 同步：false，异步：true 
		//     data : {        //传入信息
		//         name : "张三",
		//         age : 18
		//     },
		//     success : function(data){   //返回接受信息
		//         console.log(data);
		//     }
		// })
	</script>
</html>
